import { Flag } from "../Icon/Flag";
import { observer } from "mobx-react-lite";
import { useStore } from "../../store";
import { emitter } from "../../eventEmitter";
import { CurModeColor, UnActiveModeColor } from "./Common";

const Move = observer((props: any) => {
    const { transformBarStore, toolBarStore } = useStore();
    const moveX = (e: any) => {
        transformBarStore.setX(e.target.valueAsNumber);
    };

    const moveY = (e: any) => {
        transformBarStore.setY(e.target.valueAsNumber);
    };

    const blurHandler = (e: any) => {
        emitter.emit("updateTransform", transformBarStore.transformData);
    };

    const handleKeyDown = (e: any, action: string) => {
        if (e.key == "Enter") {
            e.target.blur();
        }
    };

    const clickHandler = (e: any) => {
        toolBarStore.setCurMode("select");
        if (transformBarStore.mode === "translate") {
            transformBarStore.setMode("transform");
            emitter.emit("changeTransformModeType", "transform");
        } else {
            transformBarStore.setMode("translate");
            emitter.emit("changeTransformModeType", "translate");
        }
    };

    return (
        <div className="flex space-x-1">
            <svg className="w-5 h-5 hover:bg-gray-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                onClick={clickHandler}
            >
                <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
                <g id="SVGRepo_iconCarrier">
                    <path d="M12 3V21M12 3L9 6M12 3L15 6M12 21L15 18M12 21L9 18M3 12H21M3 12L6 15M3 12L6 9M21 12L18 9M21 12L18 15"
                        stroke={transformBarStore.mode == "translate" ? CurModeColor : UnActiveModeColor}
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round">
                    </path>
                </g>
            </svg>

            <input
                type="number"
                className="rounded-sm border-gray-200 shadow-sm p-0 text-white w-16 bg-[#000c18] text-sm text-ellipsis"
                value={transformBarStore.transformData.x}
                onChange={moveX}
                onKeyDown={(e) => handleKeyDown(e, "moveX")}
                onBlur={blurHandler}
            />
            <input
                type="number"
                className="rounded-sm border-gray-200 shadow-sm p-0 text-white w-16 bg-[#000c18] text-sm text-ellipsis"
                value={transformBarStore.transformData.y}
                onChange={moveY}
                onKeyDown={(e) => handleKeyDown(e, "moveY")}
                onBlur={blurHandler}
            />
            <Flag></Flag>
        </div>

    );
});

export { Move };

